<template>
  <div class="search_music">
    <div class="list_block">
      <music_list :list="search_music_list" ref="song_list" />
    </div>
    <div class="page_apart_block">
      <page_apart :list="pageCnt"></page_apart>
    </div>
  </div>
</template>

<script>
import page_apart from "../circle_use/page_apart.vue";
import music_list from "../circle_use/music_list.vue";
export default {
  name: "search_music_page",
  components: {
    page_apart,
    music_list,
  },
  data() {
    return {
      search_music_list: [],
      resultCount: "",
      pageCnt: 1,
      keyword: "",
      reCnt: 0, //搜索结果数量
    };
  },
  watch: {},
  created() {
    this.keyword = this.$route.query.keyword;
    this.$http
      .get("/search/song", {
        params: {
          keyword: this.$route.query.keyword,
          limit: 12,
          page: 1,
        },
      })
      .then((res) => {
        if (res.data.data.count == 0) {
          alert("空");
        } else {
          this.search_music_list = res.data.data.list; //歌曲数组
          this.resultCount = res.data.data.count; //歌曲数量
          let cnt = res.data.data.count;
          this.pageCnt = Math.ceil(cnt / 12); //页数
          this.reCnt = cnt;
        }
      });
  },
  mounted() {
    this.$emit("init");
  },
  methods: {
    pageGet(index) {
      this.$http
        .get("/search/song", {
          params: {
            keyword: this.$route.query.keyword,
            limit: 12,
            page: index,
          },
        })
        .then((res) => {
          this.search_music_list = res.data.data.list;
        });
    },
  },
};
</script>

<style scoped>
.search_music {
  width: 1192px;
  margin: 0 auto;
  margin-bottom: 63px;
  padding-top: 58px;
}
.list_block {
  margin-bottom: 21px;
}
</style>